<template>
	<view class="container" :style="[{paddingTop:CustomBar+'px'}]">
		<cu-custom bgColor="bg-white" :isBack="true">
			<block slot="backText"></block>
			<block slot="content">银行卡</block>
		</cu-custom>
		<view class="bank-container">
			<view class="bank-cards">
				<view class="card-item" v-for="(item,index) in cards" :key="index" :style="'background-image:linear-gradient(left, '+radients[index].from+','+ radients[index].to+');background-image:-o-linear-gradient(left, '+radients[index].from+','+ radients[index].to+');background-image:-webkit-gradient(linear, left top, right top, from('+radients[index].from+'),to('+radients[index].to+'))'">
					<image :src="item.bank_logo"></image>
					<view class="info">
						<view>
							<text>{{item.bankName}}</text>
							<text>{{item.bankType}}</text>
						</view>
						<view>
							<text>****</text>
							<text>****</text>
							<text>****</text>
							<text>{{item.bank_number_show}}</text>
						</view>
					</view>
					<view class="remove" :data-id="item.id" @click='removeBank'>解除绑定</view>
				</view>
				<view class="add-btn" @click='goAdd' v-if="cards.length<=4">+ 添加银行卡</view>
			</view>
		</view>
	</view>
</template>

<script>
	const util = require('../utils/utilBank.js')
	export default {
		data() {
			return {
				CustomBar: this.CustomBar,
				radients: [{
					'from': '#5d9dd6',
					'to': '#4268bd'
				}, {
					'from': '#fe8975',
					'to': '#fd5264'
				}, {
					'from': '#03b5a5',
					'to': '#068caf'
				}, {
					'from': '#fcffa8',
					'to': '#ff7b33'
				}, {
					'from': '#84fab0',
					'to': '#8fd3f4'
				}],
				cards: []
			}
		},
		methods: {
			goAdd(){
				uni.navigateTo({
					url: '/pages/addbank'
				});
			},
			removeBank(e) {
				var that = this
				uni.showModal({
					title: "提示",
					content: "确认解绑此银行卡？",
					showCancel: true, //是否显示取消按钮
					cancelText: "取消", //默认是“取消”
					confirmText: "确定", //默认是“确定”
					success: function(res) {
						if (res.confirm) {
							that.$request({
								url: '/user/delUserBank',
								data: {
									ub_id: e.currentTarget.dataset.id
								},
								success: res => {
									if (res.data.status == 1) {
										var list = that.cards;
										uni.showToast({
											title: '删除银行卡成功',
											icon: 'none'
										})
										list.forEach((item, index) => {
											if (item.id == e.currentTarget.dataset.id) {
												list.splice(index, 1)
											}
										})
										that.cards = [...list]
									}
								},
								fail: () => {},
								complete: () => {}
							});
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}

				})

			},
			getBank() {
				var that = this
				this.$request({
					url: '/user/getUserBankList',
					data: {
						user_id: that.userInfo.id
					},
					success: res => {
						if (res.data.status == 1) {
							var bank = res.data.data
							bank.forEach(item => {
								var info = util.bankCardAttribution(item.bank_number)
								if (info == 'error') {
									item.bank_number = '无效银行卡'
								} else {
									item.bank_number_show = item.bank_number.slice(item.bank_number.length - 4);
									item.bankName = info.bankName
									item.bankType = info.cardTypeName
								}
							})
							that.cards = bank
							uni.hideLoading()
						}
					},
					fail: () => {},
					complete: () => {}
				});
			}
		},
		onReady() {
			uni.setNavigationBarColor({
				frontColor: '#000000',
				backgroundColor: '#ffffff'
			})
		},
		computed: {
			userInfo() {
				return uni.getStorageSync('userInfo')
			}
		},
		onShow() {
			this.getBank()
		}
	}
</script>

<style>
	page {
		background: #f5f5f5;
	}
</style>
<style scoped>
	.bank-container {}

	.bank-cards {
		padding: 30rpx 20rpx 0;
		width: 100%;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
	}

	.bank-cards .card-item {
		width: 100%;
		height: 240rpx;
		border-radius: 8rpx;
		padding: 30rpx;
		box-sizing: border-box;
		display: flex;
		margin-bottom: 30rpx;
		position: relative
	}

	.card-item image {
		width: 100rpx;
		height: 100rpx;
		border-radius: 100%;
	}

	.card-item .info {
		height: 100%;
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: space-between;

	}

	.card-item .info>view:nth-child(1) {
		display: flex;
		flex-direction: column;
		padding-left: 20rpx;
	}

	.card-item .info>view:nth-child(1)>text {
		color: #fff;
	}

	.card-item .info>view:nth-child(1)>text:nth-child(1) {
		font-size: 32rpx;
	}

	.card-item .info>view:nth-child(1)>text:nth-child(2) {
		font-size: 28rpx;
		margin-top: 23rpx
	}

	.card-item .info>view:nth-child(2) {
		padding-left: 20rpx;
		margin-bottom: 10rpx;
		font-size: 32rpx;
	}

	.card-item .info>view:nth-child(2)>text {
		color: #fff;
		margin-right: 20rpx;
		display: inline-block;
		line-height: 35rpx;
	}

	.card-item .info>view:nth-child(2)>text:nth-child(4) {
		color: #fff;
		font-size: 24rpx;
	}

	.card-item .pay-type {
		padding: 10rpx;
		background: rgba(0, 0, 0, .2);
		height: 30rpx;
		line-height: 30rpx;
		border-radius: 8rpx;
		color: #fff;
		font-size: 24rpx;
	}

	.add-btn {

		width: 100%;
		height: 80rpx;
		line-height: 80rpx;
		color: #333333;
		background-color: #ffffff;
		border-radius: 10rpx;
		font-size: 28rpx;
		text-align: center;
		border-radius: 8rpx;
		border: solid 1rpx #efefef;
	}

	.remove {
		position: absolute;
		bottom: 0;
		right: 0;
		border-radius: 8rpx 0 8rpx 0;
		width: 160rpx;
		text-align: center;
		color: #fff;
		background: rgba(255, 255, 255, .5);
		font-size: 28rpx;
		line-height: 50rpx;

	}
</style>
